<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
 Overview
</title>
<link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style">
<script>
function asd() {
	
		parent.document.title="editionArea.js Overview";
	
}
</script>
</head>
<body bgcolor="white" onload="asd();">

<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> 	<font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top">
<em>
<b></b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<center>
	
	   <h2>editionArea.js</h2>
	
</center>

	


<h4>Summary</h4>
<p>
	
		No overview generated for 'editionArea.js'<BR/><BR/>
	
</p>

<hr>


    <table border="1" cellpadding="3" cellspacing="0" width="100%">
    <tr bgcolor="#CCCCFF" class="TableHeadingColor">
    <td colspan=2><font size="+2">
    
        <b>Class Summary</b>
    
    </font></td>
    </tr>
    
    <tr bgcolor="white" class="TableRowColor">
    <td width="15%"><b><a href="editionArea.html">editionArea</a></b></td>
    <td>&nbsp;</td>
    </tr>
    
    </table>
    <hr/> 


<!-- ========== METHOD SUMMARY =========== -->

<!-- ========== END METHOD SUMMARY =========== -->


        <pre class="sourceview"><span class="comment">/**
 * The box where objects are edited, i.e., where you put objects, move and change its properties.
 * <span class="attrib">@author</span> Roosevelt de Lima Sardinha
 * <span class="attrib">@param</span> {String} id The unique id of the edition area
 * <span class="attrib">@param</span> {Object} properties The object containing the properties to be initially set to the edition area.
 * <span class="attrib">@constructor</span>
 */</span>
<span class="reserved">function</span> editionArea(id, properties){

    <span class="comment">/**
	 * The workspace this edition area belongs to.
	 * <span class="attrib">@type</span> {Object}  
	 */</span>
	<span class="reserved">this</span>.workspace = properties.workspace;
	
	<span class="comment">/**
	 * The unique id of the property box.
	 * <span class="attrib">@type</span> {String}
	 */</span>
	<span class="reserved">this</span>.id = id;
    var thisObject = <span class="reserved">this</span>; 
	
	<span class="comment">/**
	 * The object that contains the initial properties of the edition area.
	 * <span class="attrib">@type</span> {Object} 
	 */</span>	
	<span class="reserved">this</span>.properties = properties;
	
	<span class="comment">/** 
	 * The id of the DOM node that contains this edition area.
	 * <span class="attrib">@type</span> {String}
	 */</span>	
	<span class="reserved">this</span>.parentId = <span class="reserved">this</span>.properties.parent;
	
	<span class="comment">/**
	 * The path of the CSS stylesheet file.
	 * <span class="attrib">@type</span> {String}
	 */</span>	
	<span class="reserved">this</span>.cssPath = <span class="reserved">this</span>.properties.cssPath ? <span class="reserved">this</span>.properties.cssPath : <span class="literal">"css/boxes/editionArea.css"</span>;
	
	<span class="comment">/**
	 * The title of this edition area.
 	 * <span class="attrib">@type</span> {String}
	 */</span>	
	<span class="reserved">this</span>.title = <span class="reserved">this</span>.properties.title ? <span class="reserved">this</span>.properties.title : <span class="literal">'EditionArea'</span>;
	
	<span class="comment">/**
	 * The left coordinate of the edition area.
	 * <span class="attrib">@type</span> {Int}
	 */</span>		
	<span class="reserved">this</span>.left = <span class="reserved">this</span>.properties.left ? parseInt(<span class="reserved">this</span>.properties.left) : 0;
	
	<span class="comment">/**
	 * The top coordinate of the edition area.
	 * <span class="attrib">@type</span> {Int}
	 */</span>	
	<span class="reserved">this</span>.top = <span class="reserved">this</span>.properties.top ? parseInt(<span class="reserved">this</span>.properties.top) : 0;
	
	<span class="comment">/**
	 * The width of the edition area.
	 * <span class="attrib">@type</span> {Int}
	 */</span>
	<span class="reserved">this</span>.width = <span class="reserved">this</span>.properties.width ? parseInt(<span class="reserved">this</span>.properties.width) : 100;
	
	<span class="comment">/**
	 * The height of the edition area.
	 * <span class="attrib">@type</span> {Int}
	 */</span>		
	<span class="reserved">this</span>.height = <span class="reserved">this</span>.properties.height ? parseInt(<span class="reserved">this</span>.properties.height) : 100;
	
	<span class="comment">// Events</span>
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you drag the edition area.
	 * <span class="attrib">@param</span> {Int} x The left coordinate of the edition area while dragging.
	 * <span class="attrib">@param</span> {Int} y The top coordinate of the edition area while dragging.
	 * <span class="attrib">@param</span> {Object} editionArea The edition area being dragged.
	 */</span>			
	<span class="reserved">this</span>.onDrag = <span class="reserved">function</span>(x, y, editionArea){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you drop the edition area.
	 * <span class="attrib">@param</span> {Int} x The left coordinate of the edition area when dropped.
	 * <span class="attrib">@param</span> {Int} y The top coordinate of the edition area when dropped.
	 * <span class="attrib">@param</span> {Object} editionArea The edition area being dropped.
	 */</span>		
	<span class="reserved">this</span>.onDrop = <span class="reserved">function</span>(x, y, editionArea){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you start to resize the edition area.
	 * <span class="attrib">@param</span> {Int} width The width of the edition area when you start to resize.
	 * <span class="attrib">@param</span> {Int} height The height of the edition area when you start to resize.
	 * <span class="attrib">@param</span> {Object} editionArea The edition area being resized.
	 */</span>		
	<span class="reserved">this</span>.onBeforeResize = <span class="reserved">function</span>(width, height, editionArea){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done during resize.
	 * <span class="attrib">@param</span> {Int} width The width of the edition area during resize.
	 * <span class="attrib">@param</span> {Int} height The height of the edition area during resize.
	 * <span class="attrib">@param</span> {Object} editionArea The edition area being resized.
	 */</span>	
	<span class="reserved">this</span>.onResize = <span class="reserved">function</span>(width, height, editionArea){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done after resize.
	 * <span class="attrib">@param</span> {Int} width The width of the edition area after resize.
	 * <span class="attrib">@param</span> {Int} height The height of the edition area after resize.
	 * <span class="attrib">@param</span> {Object} editionArea The edition area resized.
	 */</span>		
	<span class="reserved">this</span>.onAfterResize = <span class="reserved">function</span>(width, height, editionArea){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you remove this edition area.
	 */</span>	
	<span class="reserved">this</span>.onRemove = <span class="reserved">function</span>(){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you restore the size of this edition area.
	 * <span class="attrib">@param</span> {Object} editionArea The edition area the size was restored.
	 */</span>		
	<span class="reserved">this</span>.onRestoreSize = <span class="reserved">function</span>(editionArea){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when an EO id appended to the edition area.
	 * <span class="attrib">@param</span> {Object} EO The EO being appended.
	 * <span class="attrib">@param</span> {Object} editionArea The edition area that appended the EO.
	 */</span>
	<span class="reserved">this</span>.onAppend = <span class="reserved">function</span>(EO, editionArea){};
		
    var parent = document.getElementById(properties.parent);
    
    <span class="comment">// Gets the initial size and position of the object</span>
    var iniLeft = parseInt(<span class="reserved">this</span>.properties.left);
    var iniTop = parseInt(<span class="reserved">this</span>.properties.top);
    var iniWidth = parseInt(<span class="reserved">this</span>.properties.width);
    var iniHeight = parseInt(<span class="reserved">this</span>.properties.height);

    var editionAreaBg = document.createElement(<span class="literal">'div'</span>);
    editionAreaBg.id = <span class="reserved">this</span>.id + <span class="literal">'Bg'</span>;
    editionAreaBg.className = <span class="literal">'edition-area-box'</span>;
	editionAreaBg.style.position = <span class="literal">'absolute'</span>;
	editionAreaBg.style.borderWidth = <span class="literal">'4px'</span>;
    editionAreaBg.style.left = <span class="reserved">this</span>.left + <span class="literal">'px'</span>;
    editionAreaBg.style.top = <span class="reserved">this</span>.top + <span class="literal">'px'</span>;
    editionAreaBg.style.width = <span class="reserved">this</span>.width + <span class="literal">'px'</span>;
    editionAreaBg.style.height = <span class="reserved">this</span>.height + <span class="literal">'px'</span>;
    
    <span class="comment">//code for the divs: background of the object and the div where the user works		</span>
    var editionArea = document.createElement(<span class="literal">'div'</span>);
	<span class="comment">/**
	 * <span class="attrib">@ignore</span>
	 */</span>
    editionArea.id = <span class="reserved">this</span>.id;
	<span class="comment">/**
	 * <span class="attrib">@ignore</span>
	*/</span>
	editionArea.className = <span class="literal">'edition-area-content'</span>;
	editionArea.style.position = <span class="literal">'absolute'</span>;
    editionArea.style.left = <span class="reserved">this</span>.left + parseInt(editionAreaBg.style.borderWidth) + <span class="literal">'px'</span>;
    editionArea.style.top = <span class="reserved">this</span>.top + parseInt(editionAreaBg.style.borderWidth) + <span class="literal">'px'</span>;
    editionArea.style.width = <span class="reserved">this</span>.width + <span class="literal">'px'</span>;
    editionArea.style.height = <span class="reserved">this</span>.height + <span class="literal">'px'</span>;

	
    <span class="comment">// A copy of the background div is generate to solve problems like opacity heritance and borders size</span>
    var editionAreaHeader = document.createElement(<span class="literal">'div'</span>);
    editionAreaHeader.id = <span class="reserved">this</span>.id + <span class="literal">'Header'</span>;
    editionAreaHeader.className = <span class="literal">'edition-area-header'</span>;
    editionAreaHeader.innerHTML = <span class="reserved">this</span>.title;
	
	editionArea.appendChild(editionAreaHeader);
    
    parent.appendChild(editionAreaBg);
	parent.appendChild(editionArea);

	<span class="comment">/**
	 * The EOM to manage EOs in this edition area.
	 * <span class="attrib">@type</span> {Object}
	 */</span>
    <span class="reserved">this</span>.EOM = new editorObjectManager(<span class="reserved">this</span>);
	
    editionAreaHeader.ondblclick = <span class="reserved">function</span>(){
        thisObject.setLeft(iniLeft);
        thisObject.setTop(iniTop);
        var maxRight = thisObject.EOM.getMaxRight();
        <span class="reserved">if</span> (maxRight &lt; iniWidth) {
            thisObject.setWidth(iniWidth);
        }
        <span class="reserved">else</span> {
            thisObject.setWidth(maxRight);
        }
        
        var maxBottom = thisObject.EOM.getMaxBottom();
        <span class="reserved">if</span> (maxBottom &lt; iniHeight) {
            thisObject.setHeight(iniHeight);
        }
        <span class="reserved">else</span> {
            thisObject.setHeight(maxBottom);
        }
		
		thisObject.onRestoreSize(thisObject);
    };
    
    <span class="comment">//make the divs resizable</span>
    var maxRight = 0;
    var maxBottom = 0;
    $(<span class="literal">'#'</span> + <span class="reserved">this</span>.id).resizable({
        start: <span class="reserved">function</span>(event, ui){
			thisObject.onBeforeResize(document.getElementById(thisObject.id).offsetWidth, document.getElementById(thisObject.id).offsetHeight, thisObject);
            maxRight = thisObject.EOM.getMaxRight();
            maxBottom = thisObject.EOM.getMaxBottom();
            <span class="reserved">if</span> (maxRight &lt; 100) {
                maxRight = 100;
            }
            <span class="reserved">if</span> (maxBottom &lt; 50) {
                maxBottom = 50;
            }
            $(<span class="literal">'#'</span> + thisObject.id).resizable(<span class="literal">'option'</span>, <span class="literal">'minWidth'</span>, maxRight);
            $(<span class="literal">'#'</span> + thisObject.id).resizable(<span class="literal">'option'</span>, <span class="literal">'minHeight'</span>, maxBottom);
        },
        resize: <span class="reserved">function</span>(event, ui){
            thisObject.setWidth(document.getElementById(thisObject.id).offsetWidth);
            thisObject.setHeight(document.getElementById(thisObject.id).offsetHeight);
			thisObject.onResize(document.getElementById(thisObject.id).offsetWidth, document.getElementById(thisObject.id).offsetHeight, thisObject);
        },
        stop: <span class="reserved">function</span>(event, ui){
            thisObject.setWidth(document.getElementById(thisObject.id).offsetWidth);
            thisObject.setHeight(document.getElementById(thisObject.id).offsetHeight);
			thisObject.onAfterResize(document.getElementById(thisObject.id).offsetWidth, document.getElementById(thisObject.id).offsetHeight, thisObject);
        },
        containment: <span class="literal">'#'</span> + <span class="reserved">this</span>.parentId,
        minWidth: 100,
        minHeight: 50
    });
    
    <span class="comment">//make the divs draggable</span>
    $(<span class="literal">'#'</span> + <span class="reserved">this</span>.id).draggable({
        handle: <span class="literal">'#'</span>+ thisObject.id +<span class="literal">'Header'</span>,
        containment: <span class="literal">'#'</span> + <span class="reserved">this</span>.parentId,
        drag: <span class="reserved">function</span>(event, ui){
            thisObject.setTop(document.getElementById(thisObject.id).offsetTop);
            thisObject.setLeft(document.getElementById(thisObject.id).offsetLeft);
			thisObject.onDrag(document.getElementById(thisObject.id).offsetLeft, document.getElementById(thisObject.id).offsetTop, thisObject);
        },
        stop: <span class="reserved">function</span>(event, ui){
            thisObject.setTop(document.getElementById(thisObject.id).offsetTop);
            thisObject.setLeft(document.getElementById(thisObject.id).offsetLeft);
			thisObject.onDrop(document.getElementById(thisObject.id).offsetLeft, document.getElementById(thisObject.id).offsetTop, thisObject);
        }
    });
    
    <span class="comment">// Makes things in the edition area selectable.</span>
    $(<span class="literal">'#'</span> + <span class="reserved">this</span>.id).selectable({
        cancel: <span class="literal">''</span>,
        selected: <span class="reserved">function</span>(event, ui){
            var selectedId = $(ui.selected).attr(<span class="literal">'id'</span>);
            var EO = null;
            EO = thisObject.EOM.getEOByHTMLObjectId(selectedId);
            <span class="reserved">if</span> (EO != -1) {
                <span class="reserved">if</span> (EO.selected == false) {
                    thisObject.EOM.selectEO(EO.id);
                }
            }
        },
        start: <span class="reserved">function</span>(event, ui){
            <span class="reserved">if</span> (event.ctrlKey == false) {
                thisObject.EOM.unselectAll();
            }
            
        },
        unselected: <span class="reserved">function</span>(event, ui){
            var unselectedId = $(ui.unselected).attr(<span class="literal">'id'</span>);
            var EO = null;
            EO = thisObject.EOM.getEOByHTMLObjectId(unselectedId);
            <span class="reserved">if</span> (EO != -1) {
                thisObject.EOM.unselectEO(EO.id);
            }
        }
    });
	
    var myCursor = new cursor(<span class="reserved">this</span>.id);
    
    <span class="comment">// Makes the edition area droppable to receive its objects</span>
    $(<span class="literal">'#'</span> + <span class="reserved">this</span>.id).droppable({
        tolerance: <span class="literal">'fit'</span>,
        hoverClass: <span class="literal">'edition-area-drag-hover'</span>,
        drop: <span class="reserved">function</span>(event, ui){
            <span class="comment">// Gets the id of the image being dropped </span>
            var imageId = $(ui.draggable).attr(<span class="literal">'id'</span>);
            var image = document.getElementById(imageId);
            
            <span class="comment">// Continue only if its an image from the toolBox.</span>
            <span class="reserved">if</span> ((image.tagName == <span class="literal">"IMG"</span>) &amp;&amp; (image.className.indexOf(<span class="literal">'tool-icon'</span>) != -1)) {
                <span class="comment">// Creates an Editor Object according to the image of the tool dropped in this edition area.</span>
				<span class="comment">// The name of the image is its type.</span>
                var EO = thisObject.EOM.createEO(image.name);
				thisObject.appendObject(EO);

				EO.setInstructionBox(image.instructionBox);
				EO.setPropertyBox(image.propertyBox);
				
                EO.setLeft(myCursor.getLeft(event) - myCursor.getContainerLeft());
                EO.setTop(myCursor.getTop(event) - myCursor.getContainerTop());
				
				<span class="comment">// Default Snap to grid</span>
				EO.setSnapTo(thisObject.snapTo.x, thisObject.snapTo.y);
				
                thisObject.EOM.unselectAll();
				
				<span class="reserved">if</span> (EO.onAppend){
					EO.onAppend();	
				}
            }
        }
    });
	
	<span class="comment">/**
	 * Contains the snapTo configuration of this edition area.
	 * The SnapTo is the measurement in pixels of the size of the steps used by the EO movements in the edition area.
	 * The purpose is to ease the alignment of several EOs.
	 * <span class="attrib">@type</span> {Object} 
	 */</span>
	<span class="reserved">this</span>.snapTo = {
		x: 10,
		y: 10
	};

	<span class="comment">/**
	 * Sets the snapTo of the editionArea and of all EOs there.
	 * <span class="attrib">@param</span> {Int} x The x coordinate of the snapTo being set.
	 * <span class="attrib">@param</span> {Int} y The y coordinate of the snapTo being set.
	 */</span>
	<span class="reserved">this</span>.setSnapGrid = <span class="reserved">function</span>(x, y){
		<span class="comment">// Snap to grid configuration</span>
		$( <span class="literal">"#"</span> + id ).draggable(<span class="literal">'option'</span>, <span class="literal">'grid'</span>, [ x,y ]);
		<span class="reserved">this</span>.EOM.setAllEOSnapTo(x, y);
		<span class="reserved">this</span>.snapTo = {x: x, y: y};
	}
	
	<span class="comment">/**
	 * Adds an EO to the editionArea.
	 * <span class="attrib">@param</span> {Object} EO The EO that is going to be added
	 */</span>    
    <span class="reserved">this</span>.appendObject = <span class="reserved">function</span>(EO){
        <span class="comment">// Adds an object to the edition area.</span>
        var objectList = EO.objectList;
        var HTMLObject = null;
		<span class="reserved">this</span>.EOM.registerEO(EO);
		<span class="reserved">this</span>.EOM.attribIds(EO);
		
        <span class="comment">// The div that is going to contain the EO</span>
        var divEO = document.createElement(<span class="literal">'div'</span>);
        divEO.id = EO.id;
		divEO.className = <span class="literal">'edition-area-eo-container'</span>;
        
        <span class="comment">// Events to be implemented by the tools</span>
        divEO.onmouseover = <span class="reserved">function</span>(event){
            <span class="reserved">if</span> (EO.onMouseOver) {
                EO.onMouseOver(event, EO);
            }
        }
        
        divEO.onmouseout = <span class="reserved">function</span>(event){
            <span class="reserved">if</span> (EO.onMouseOut) {
                EO.onMouseOut(event, EO);
            }
        }
        
        divEO.onmousedown = <span class="reserved">function</span>(event){
            <span class="reserved">if</span> (EO.onMouseDown) {
                EO.onMouseDown(event, EO);
            }
        }
        
        divEO.ondblclick = <span class="reserved">function</span>(event){
            <span class="reserved">if</span> (EO.onDblClick) {
                EO.onDblClick(event, EO);
            }
        }
        <span class="comment">// end of events</span>
        
        <span class="reserved">for</span> (var i = 0; i &lt; objectList.length; i++) {
			HTMLObject = EO.getHTMLObject(objectList[i]);
			divEO.appendChild(HTMLObject);		
        }
        
        editionArea.appendChild(divEO);
		<span class="reserved">this</span>.EOM.setSelectors(EO, EO.selectorIds);	
        
        $(<span class="literal">'#'</span> + divEO.id).draggable({
            cancel: <span class="literal">''</span>,
            containment: <span class="literal">'#'</span> + thisObject.id,
			drag: <span class="reserved">function</span>(event, ui){
				thisObject.EOM.moveSelectedLeft(ui.position.left - EO.getLeft());
				thisObject.EOM.moveSelectedTop(ui.position.top - EO.getTop());
				<span class="reserved">if</span> (EO.onDrag){
					EO.onDrag(EO.getLeft(), EO.getTop(), EO);
				}
			}, 
			stop: <span class="reserved">function</span>(event, ui){
				<span class="reserved">if</span> (EO.onDrop){
					EO.onDrop(EO.getLeft(), EO.getTop(), EO);
				}
			}
        });
		
		<span class="reserved">this</span>.onAppend(EO, <span class="reserved">this</span>);
		
		EO.setSnapTo(<span class="reserved">this</span>.snapTo.x,<span class="reserved">this</span>.snapTo.x);
    }
    
	<span class="comment">/**
	 *  Returns a JSON corresponding to the content of the edition area and all its EOs.
	 *  <span class="attrib">@return</span> The correspondign JSON object.
	 *  <span class="attrib">@type</span> {Object}
	 */</span>
    <span class="reserved">this</span>.contentJSON = <span class="reserved">function</span>(){
        var JSONObject = <span class="reserved">this</span>.EOM.EO_JSON();
        <span class="reserved">return</span> JSONObject;
    }
    
	<span class="comment">/**
	 * Sets the left property of the edition area. 
	 * <span class="attrib">@param</span> {Int} left The left coordinate to be set.
	 */</span>
    <span class="reserved">this</span>.setLeft = <span class="reserved">function</span>(left){
        editionAreaBg.style.left = left + <span class="literal">'px'</span>;
        <span class="reserved">if</span> (navigator.appName != <span class="literal">"Microsoft Internet Explorer"</span>) {
            editionArea.style.left = left + parseInt(editionAreaBg.style.borderLeftWidth) + <span class="literal">'px'</span>;
        }
        <span class="reserved">else</span> {
            editionArea.style.left = left + <span class="literal">'px'</span>;
        }
        <span class="reserved">this</span>.left = left;
    }
		
	<span class="comment">/**
	 * Sets the top property of the edition area.
	 * <span class="attrib">@param</span> {Int} top The top coordinate to be set.
	 */</span>
    <span class="reserved">this</span>.setTop = <span class="reserved">function</span>(top){
        editionAreaBg.style.top = top + <span class="literal">'px'</span>;
        <span class="reserved">if</span> (navigator.appName != <span class="literal">"Microsoft Internet Explorer"</span>) {
            editionArea.style.top = top + parseInt(editionAreaBg.style.borderTopWidth) + <span class="literal">'px'</span>;
        }
        <span class="reserved">else</span> {
            editionArea.style.top = top + <span class="literal">'px'</span>;
        }
        <span class="reserved">this</span>.top = top;
    }
    
	<span class="comment">/**
	 * Sets the width of the edition area.
	 * <span class="attrib">@param</span> {Int} width The width to be set.
	 */</span>
    <span class="reserved">this</span>.setWidth = <span class="reserved">function</span>(width){
        editionAreaBg.style.width = width + <span class="literal">'px'</span>;
        editionArea.style.width = width + <span class="literal">'px'</span>;
        <span class="reserved">this</span>.width = width;
    }
    
	<span class="comment">/**
	 * Sets the height of the edition area.
	 * <span class="attrib">@param</span> {Int} height The height to be set.
	 */</span>
    <span class="reserved">this</span>.setHeight = <span class="reserved">function</span>(height){
        editionAreaBg.style.height = height + <span class="literal">'px'</span>;
        editionArea.style.height = height + <span class="literal">'px'</span>;
        <span class="reserved">this</span>.height = height;
    }
	
	<span class="comment">/**
	 * Sets the title of the edition area. 
	 * <span class="attrib">@param</span> {String} title The new title to be set.
	 */</span>	
	<span class="reserved">this</span>.setTitle = <span class="reserved">function</span>(title){
		editionAreaHeader.innerHTML = title;
		<span class="reserved">this</span>.title = title;
	}
    
    <span class="reserved">this</span>.setLeft(<span class="reserved">this</span>.left);
    <span class="reserved">this</span>.setTop(<span class="reserved">this</span>.top);
    <span class="reserved">this</span>.setWidth(<span class="reserved">this</span>.width);
    <span class="reserved">this</span>.setHeight(<span class="reserved">this</span>.height);
	
	<span class="comment">/**
	 * Changes a property of the edition area to some value
	 * <span class="attrib">@param</span> {String} propertyName The name of the property to be changed.
	 * <span class="attrib">@param</span> {Any} value The value to be set to the property.
	 */</span>		
	<span class="reserved">this</span>.setProperty = <span class="reserved">function</span>(propertyName, value){
		switch(propertyName){
			case <span class="literal">'height'</span>:
				<span class="reserved">this</span>.setHeight(value);
				break;
			
			case <span class="literal">'width'</span>:
				<span class="reserved">this</span>.setWidth(value);
				break;
				
			case <span class="literal">'top'</span>:
				<span class="reserved">this</span>.setTop(value);
				break;
			
			case <span class="literal">'left'</span>:
				<span class="reserved">this</span>.setLeft(value);
				break;
				
			case <span class="literal">'title'</span>:
				<span class="reserved">this</span>.setTitle(value);
				break; 
			
			case <span class="literal">'cssPath'</span>:
				<span class="reserved">this</span>.setCSS(value);
				break;
			
			default:
				document.write(<span class="literal">'Property not found'</span>);
				break;
		}
	}

	<span class="comment">/**
	 * Removes this edition area.
	 */</span>		
	<span class="reserved">this</span>.remove =  <span class="reserved">function</span>(){
		<span class="reserved">this</span>.EOM.removeAllEOs();
		editionArea.parentNode.removeChild(editionArea);
		editionAreaBg.parentNode.removeChild(editionAreaBg);
		editionAreaHeader.parentNode.removeChild(editionAreaHeader);
		delete editionArea;
		delete editionAreaHeader;
		delete editionAreaBg;
		delete <span class="reserved">this</span>.EOM;
		<span class="reserved">this</span>.onRemove();
	}

	<span class="comment">/**
	 * Sets a new CSS stylesheet to the edition area.
	 * <span class="attrib">@param</span> {String} path The relative path of the CSS stylesheet file from the APP_HOME folder.
	 */</span>		
	<span class="reserved">this</span>.setCSS = <span class="reserved">function</span>(path){
		<span class="reserved">this</span>.workspace.setCSS(<span class="reserved">this</span>, path);
	}
	<span class="reserved">this</span>.setCSS(<span class="reserved">this</span>.cssPath);	
}
</pre>
	<hr>



<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top"><em>
<b></b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<font size="-1">

</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Mon Feb 21 18:12:28 2011</div>
</body>
</html>
